import { Component, OnInit, ElementRef, } from '@angular/core';
import G6 from '@antv/g6';
import mock from './mock.js'

declare var BMapSub: any;

@Component({
  selector: 'app-overview-center',
  templateUrl: './center.component.html',
  styleUrls: ['./center.component.less']
})
export class CenterComponent implements OnInit {
  mockListData = mock.data
  optionList: string[] = [];
  selectedUser = null;
  isLoading = false;

  constructor(private elementRef: ElementRef) { }

  ngOnInit(): void {


  }

  ngAfterViewInit() {
    this.showSubway();
    // this.showSubstationLine()
  }

  loadMore(): void {
    // this.isLoading = true;
    // this.getRandomNameList.subscribe(data => {
    //   this.isLoading = false;
    //   this.optionList = [...this.optionList, ...data];
    // });
  }

  showSubway(): void {
    let subwayCityName: string = '重庆';
    let list: Array<any> = BMapSub.SubwayCitiesList;
    let subwaycity: any = null;
    for (let i: number = 0; i < list.length; i++) {
        if (list[i].name === subwayCityName) {
            subwaycity = list[i];
            break;
        }
    }
    // 获取长沙地铁数据-初始化地铁图
    let subway: any = new BMapSub.Subway('container', subwaycity.citycode);
    subway.setZoom(0.3);
    // let BMAPSUB_ANCHOR_BOTTOM_RIGHT = 'bottom_right'
    // let zoomControl  = new BMapSub.ZoomControl({
    //   anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
    //   offset: new BMapSub.Size(5,30)
    // });
    // subway.addControl(zoomControl);
    subway.addEventListener('subwayloaded', function(e: any) { // 渲染完触发

    });
    subway.addEventListener('tap', function(e: any) {
        console.log(e)
        alert('您点击了"' + e.station.name + '"站');
    });
  }

  showSubstationLine(): void {
    const colors = [
      'rgb(64, 174, 247)',
      'rgb(108, 207, 169)',
      'rgb(157, 223, 125)',
      'rgb(240, 198, 74)',
      'rgb(221, 158, 97)',
      'rgb(141, 163, 112)',
      'rgb(115, 136, 220)',
      'rgb(133, 88, 219)',
      'rgb(203, 135, 226)',
      'rgb(227, 137, 163)',
    ];
    // 创建节点
    G6.registerNode(
      'breath-node',
      {
        afterDraw(cfg: any, group: any) {
          const r = cfg.size / 2;
          const back1 = group.addShape('circle', {
            zIndex: -3,
            attrs: {
              x: 0,
              y: 0,
              r,
              fill: cfg.color || (cfg.style && cfg.style.fill),
              opacity: 0.6,
            },
            name: 'back1-shape',
          });
          const back2 = group.addShape('circle', {
            zIndex: -2,
            attrs: {
              x: 0,
              y: 0,
              r,
              fill: cfg.color || (cfg.style && cfg.style.fill),
              opacity: 0.6,
            },
            name: 'back2-shape',
          });
          const back3 = group.addShape('circle', {
            zIndex: -1,
            attrs: {
              x: 0,
              y: 0,
              r,
              fill: cfg.color || (cfg.style && cfg.style.fill),
              opacity: 0.6,
            },
            name: 'back3-shape',
          });
          group.sort(); // 排序，根据zIndex 排序
          const delayBase = Math.random() * 2000;
          back1.animate(
            {
              // 逐渐放大，并消失
              r: r + 6,
              opacity: 0.0,
            },
            {
              repeat: true, // 循环
              duration: 3000,
              easing: 'easeCubic',
              delay: delayBase, // 无延迟
            },
          );
          back2.animate(
            {
              // 逐渐放大，并消失
              r: r + 6,
              opacity: 0.0,
            },
            {
              repeat: true, // 循环
              duration: 3000,
              easing: 'easeCubic',
              delay: delayBase + 1000, // 1 秒延迟
            },
          );
          back3.animate(
            {
              // 逐渐放大，并消失
              r: r + 6,
              opacity: 0.0,
            },
            {
              repeat: true, // 循环
              duration: 3000,
              easing: 'easeCubic',
              delay: delayBase + 2000, // 2 秒延迟
            },
          );
        },
      },
      'circle',
    );

    // 创建边
    G6.registerEdge(
      'running-polyline',
      {
        afterDraw(cfg, group) {
          const shape = group.get('children')[0];
          console.log(shape)
          const length = shape.getTotalLength();
          let circleCount = Math.ceil(length / 20);
          circleCount = circleCount === 0 ? 1 : circleCount;

          const _loop = function _loop(i) {
            const delay = Math.random() * 1000;
            const start = shape.getPoint(i / circleCount);
            const circle = group.addShape('circle', {
              attrs: {
                x: start.x,
                y: start.y,
                r: 0.8,
                fill: '#A0F3AF',
                shadowColor: '#fff',
                shadowBlur: 30,
              },
              name: 'circle-shape',
            });
            circle.animate(
              (ratio) => {
                ratio += i / circleCount;
                if (ratio > 1) {
                  ratio %= 1;
                }
                const tmpPoint = shape.getPoint(ratio);
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true,
                duration: 10 * length,
                easing: 'easeCubic',
                delay,
              },
            );
          };

          for (let i = 0; i < circleCount; i++) {
            _loop(i);
          }
        },
      },
      'polyline',
    );

    const graph = new G6.Graph({
      container: 'container',
      width: 500,
      height: 500,
      modes: {
        default: [
          {
            type: 'edge-tooltip',
            formatText: function formatText(model) {
              const text: any = model.class;
              return text;
            },
          },
        ],
      },
      defaultNode: {
        type: 'breath-node',
        size: 8,
        style: {
          lineWidth: 0,
          fill: 'rgb(240, 223, 83)',
        },
      },
      defaultEdge: {
        type: 'running-polyline',
        size: 4,
        color: 'red',
        style: {
          opacity: 0.4,
          lineAppendWidth: 3,
        },
      },
    });

    const graphSize = [500, 500];
    const data = {
      nodes: [
        {
          id: '0',
          x: 1257834493,
          y: 326233280,
          class: '长沙1号线',
          name: '开福区政府'
        },
        {
          id: '1',
          x: 1257871904,
          y: 326097323,
          class: '长沙1号线',
          name: '马厂'
        },
        {
          id: '2',
          x: 1257816592,
          y: 325906190,
          class: '长沙1号线',
          name: '北辰三角洲'
        },
        {
          id: '3',
          x: 1257768549,
          y: 325737242,
          class: '长沙1号线',
          name: '开福寺'
        },
        {
          id: '4',
          x: 1257754202,
          y: 325616181,
          class: '长沙1号线',
          name: '文昌阁'
        }
      ],
      edges: [
        {
          id: "0",
          source: "0",
          target: "1",
          class: "长沙一号线",
          name: "开福区政府",
        },
        {
          id: "1",
          source: "1",
          target: "2",
          class: "长沙一号线",
          name: "马厂",
        },
        {
          id: "2",
          source: "2",
          target: "3",
          class: "长沙一号线",
          name: "北辰三角洲",
        },
        {
          id: "3",
          source: "3",
          target: "4",
          class: "长沙一号线",
          name: "开福寺",
        }
      ]
    }
    const nodes = data.nodes;
    console.log(nodes)

        const edges = data.edges;
        console.log(edges)
        const classMap = new Map();
        let classId = 0;
        nodes.forEach(function (node) {
          node.y = -node.y;
        });
        edges.forEach(function (edge) {
          edge.id = `edge-${edge.id}`;
          // edge cluster
          if (edge.class && classMap.get(edge.class) === undefined) {
            classMap.set(edge.class, classId);
            classId++;
          }
        });
        scaleNodesPoints(nodes, edges, graphSize);
        graph.data(data);
        graph.render();
    // fetch('https://gw.alipayobjects.com/os/basement_prod/8c2353b0-99a9-4a93-a5e1-3e7df1eac64f.json')
    //   .then((res) => res.json())
    //   .then((data) => {
    //     const nodes = data.nodes;
    //     const edges = data.edges;
    //     const classMap = new Map();
    //     let classId = 0;
    //     nodes.forEach(function (node) {
    //       node.y = -node.y;
    //     });
    //     edges.forEach(function (edge) {
    //       edge.id = `edge-${edge.id}`;
    //       // edge cluster
    //       if (edge.class && classMap.get(edge.class) === undefined) {
    //         classMap.set(edge.class, classId);
    //         classId++;
    //       }
    //       const cid = classMap.get(edge.class);
    //       edge.color = colors[cid % colors.length];
    //       const controlPoints = edge.controlPoints;

    //       controlPoints.forEach(function (cp) {
    //         cp.y = -cp.y;
    //       });
    //     });
    //     scaleNodesPoints(nodes, edges, graphSize);
    //     graph.data(data);
    //     graph.render();
    //   });

    function scaleNodesPoints(nodes, edges, graphSize) {
      // debugger
      console.log(nodes)
      console.log(edges)
      console.log(graphSize)
      const size = graphSize[0] < graphSize[1] ? graphSize[0] : graphSize[1];
      let minX = 99999999999999999;
      let maxX = -99999999999999999;
      let minY = 99999999999999999;
      let maxY = -99999999999999999;
      nodes.forEach(function (node) {
        if (node.x > maxX) maxX = node.x;
        if (node.x < minX) minX = node.x;
        if (node.y > maxY) maxY = node.y;
        if (node.y < minY) minY = node.y;
      });

      // edges.forEach(function (edge) {
      //   const controlPoints = edge.controlPoints;
      //   controlPoints.forEach(function (cp) {
      //     if (cp.x > maxX) maxX = cp.x;
      //     if (cp.x < minX) minX = cp.x;
      //     if (cp.y > maxY) maxY = cp.y;
      //     if (cp.y < minY) minY = cp.y;
      //   });
      // });

      const xScale = maxX - minX;
      const yScale = maxY - minY;
      nodes.forEach(function (node) {
        node.orix = node.x;
        node.oriy = node.y;
        node.x = ((node.x - minX) / xScale) * size;
        node.y = ((node.y - minY) / yScale) * size;
      });
      // edges.forEach(function (edge) {
      //   const controlPoints = edge.controlPoints;
      //   controlPoints.forEach(function (cp) {
      //     cp.x = ((cp.x - minX) / xScale) * size;
      //     cp.y = ((cp.y - minY) / yScale) * size;
      //   });
      // });
    }
  }

}
